import React, { useEffect, useState } from 'react';
import { connect, useDispatch, Link } from 'umi';
import { Table, Row, Col } from 'antd';
import { ArrowLeftOutlined } from '@ant-design/icons';
import PageTopFormContent from '@/components/PageTopFormContent';
// import PaginationCommon from '@/components/PaginationCommon';

import styles from './RoleDetail.less';
// import RoleAuthConfig from '../components/RoleAuthConfig';

export const RoleTypes = ['公共角色', '组织角色'];

const RoleDetail = (props) => {
  const {
    location: { state = {} },
    loading: { effects },
  } = props;
  const { roleId = '' } = state;
  const [roleDetailData, setRoleDetailData] = useState({});
  const dispatch = useDispatch();

  // useEffect(() => {
  //   if (roleId) {
  //     const currentData = {
  //       pageIndex: currentPageNum,
  //       pageSize: currenPageSize,
  //       roleId,
  //     };
  //     dispatch({
  //       type: 'commonRoleManageModel/getRoleUserList',
  //       payload: currentData,
  //     }).then((res) => {
  //       const { code, data } = res;
  //       if (code === 0 && data) {
  //         const { dataList, total } = data;
  //         setUserList(dataList);
  //         setUserListTotal(total);
  //       }
  //     });
  //   }
  // }, [dispatch, roleId, currentPageNum, currenPageSize]);

  useEffect(() => {
    if (roleId) {
      dispatch({
        type: 'commonRoleManageModel/getOrgRoleDtail',
        payload: { roleId },
      }).then((res) => {
        if (res?.code === 0) {
          setRoleDetailData(res?.data);
        } else {
          message.error(res?.message);
        }
      });
    }
  }, [dispatch, roleId]);

  // const handlePaginationChange = (page, pageSize) => {
  //   setcurrentPageNum(page);
  //   setCurrenPageSize(pageSize);
  // };

  const columnsOrg = [
    {
      title: '组织编码',
      dataIndex: 'orgCode',
      key: 'orgCode',
    },
    {
      title: '组织名称',
      dataIndex: 'orgName',
      key: 'orgCode',
    },
    // {
    //   title: '用户编码',
    //   dataIndex: 'userAccount',
    //   key: 'userAccount',
    // },
    // {
    //   title: '姓名',
    //   dataIndex: 'username',
    //   key: 'username',
    // },
    // // {
    // //   title: '性别',
    // //   dataIndex: 'userName',
    // //   key: 'userName',
    // // },
    // // {
    // //   title: '用户类型',
    // //   dataIndex: 'mobilePhone',
    // //   key: 'mobilePhone',
    // // },
    // {
    //   title: '所属组织',
    //   dataIndex: 'orgNames',
    //   key: 'orgNames',
    // },
    // {
    //   title: '工号',
    //   dataIndex: 'userAccount',
    //   key: 'userAccount',
    // },
    // // {
    // //   title: '岗位信息',
    // //   dataIndex: 'mobilePhone',
    // //   key: 'mobilePhone',
    // // },
    // // {
    // //   title: '是否主管',
    // //   dataIndex: 'mobilePhone',
    // //   key: 'mobilePhone',
    // // },
    // // {
    // //   title: '专业信息',
    // //   dataIndex: 'mobilePhone',
    // //   key: 'mobilePhone',
    // // },
    // // {
    // //   title: '工艺印章',
    // //   dataIndex: 'mobilePhone',
    // //   key: 'mobilePhone',
    // // },
    // {
    //   title: '手机号码',
    //   dataIndex: 'mobilePhone',
    //   key: 'mobilePhone',
    // },
    // {
    //   title: '邮箱地址',
    //   dataIndex: 'email',
    //   key: 'email',
    // },
    // {
    //   title: '状态',
    //   dataIndex: 'roleState',
    //   key: 'roleState',
    //   render: (text) => <span>{text === 1 ? '有效' : '无效'}</span>,
    // },
  ];

  return (
    <div className={styles.root}>
      <PageTopFormContent
        title={
          <Link to="/authoritymanage/orgrolemanage" style={{ color: 'unset' }}>
            <ArrowLeftOutlined style={{ marginRight: 16, cursor: 'pointer' }} />
            角色详情
          </Link>
        }
      />
      <div className={styles.blockWrapper}>
        <div className={styles.title}>角色信息</div>
        <div className={styles.contentWrapper}>
          <Row gutter={[16, 16]}>
            <Col className="gutter-row" span={8}>
              <span className={styles.labelTitle}>角色编码：</span>
              <span>{roleDetailData.roleCode}</span>
            </Col>
            <Col className="gutter-row" span={8}>
              <span className={styles.labelTitle}>角色名称：</span>
              {roleDetailData.roleName}
            </Col>
            <Col className="gutter-row" span={8}>
              <span className={styles.labelTitle}>组织数：</span>
              <span>{roleDetailData.orgList?.length}</span>
            </Col>
            <Col className="gutter-row" span={8}>
              <span className={styles.labelTitle}>角色类型：</span>
              <span>{RoleTypes[roleDetailData.roleType]}</span>
            </Col>
            <Col className="gutter-row" span={8}>
              <span className={styles.labelTitle}>角色描述：</span>
              <span>{roleDetailData.roleDesc}</span>
            </Col>
            <Col className="gutter-row" span={8}>
              <span className={styles.labelTitle}>创建时间：</span>
              <span>{roleDetailData.gmtCreated}</span>
            </Col>
          </Row>
        </div>
      </div>
      <div className={styles.blockWrapper}>
        <div className={styles.title}>组织信息</div>
        <div className={styles.contentWrapper}>
          <Table
            columns={columnsOrg}
            dataSource={roleDetailData.orgList}
            pagination={true}
            scroll={{ x: 900 }}
          />

          {/* <PaginationCommon
            total={userListTotal}
            onChange={handlePaginationChange}
            style={{ textAlign: 'right' }}
            current={currentPageNum}
            pageSize={currenPageSize}
          /> */}
        </div>
      </div>
      {/* <div className={styles.blockWrapper} style={{ position: 'relative' }}>
        <RoleAuthConfig editable={false} defaultCheckedKeys={roleDetailData.resourceIdList || []} />

      </div> */}
    </div>
  );
};

export default connect((state) => state)(RoleDetail);
